<template>
    <div class="scan-page">
        <!-- 入库单信息 -->
        <div class="page-card">
            <div class="page-title">
                <div class="title-content">
                    <span>入库单信息</span>
                    <!-- <image src="../../static/icons/print.png" class="print-icon" /> -->
                    <div :class="tag.class" class="tag">{{ tag.text }}</div>
                </div>
            </div>

            <!-- 信息项 -->
            <div class="info-list">
                <div class="list-item">
                    <div class="item-title">入库单号</div>
                    <div class="item-content">{{ detailInfo.receiptOrderNum }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">产品类型</div>
                    <div class="item-content">{{ detailInfo.productType }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">产品代码</div>
                    <div class="item-content">015{{ detailInfo.productCode }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">入库箱数</div>
                    <div class="item-content">
                        {{ detailInfo.boxesNum }}
                    </div>
                </div>

                <div class="list-item">
                    <div class="item-title">轮胎数量</div>
                    <div class="item-content">{{ detailInfo.tiresNum }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">入库员工</div>
                    <div class="item-content">{{ detailInfo.employeeNum }}</div>
                </div>

                <div class="list-item" v-if="detailInfo.remark">
                    <div class="item-title">备注</div>
                    <div class="item-content">{{ detailInfo.remark }}</div>
                </div>
            </div>
        </div>

        <uni-collapse class="my-3" v-if="feedList && feedList.length">
            <uni-collapse-item title-border="none" :border="false" :open="true" v-if="draw">
                <template v-slot:title>
                    <div class="page-title collapse-title">
                        <div class="scan-title">
                            <span>投喂记录</span>
                        </div>
                    </div>
                </template>
                <div class="collapse-content">
                    <div class="number-box">
                        <div class="number-item">
                            <div class="text-warning item-value">{{ getTiresNum(feedList) }}</div>
                            <div class="item-text">已扫胎数</div>
                        </div>

                        <div class="number-item">
                            <div class="text-success item-value">{{ feedList?.length || 0 }}</div>
                            <div class="item-text">正确数量</div>
                        </div>

                        <div class="number-item">
                            <div class="text-danger item-value">0</div>
                            <div class="item-text">错误数量</div>
                        </div>
                    </div>

                    <div class="scan-list">
                        <div class="page-card" v-for="(scan, index) in feedList" :key="index">
                            <div class="scan-content">
                                <uni-icons
                                    :type="scan.type === 'error' ? 'clear' : 'checkbox-filled'"
                                    :color="scan.type === 'error' ? '#D81E06' : '#52C41B'"
                                    size="28"
                                />
                                <div
                                    class="center-content"
                                    :class="scan.type === 'error' ? 'text-danger' : ''"
                                >
                                    {{ formatScan(scan.code) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uni-collapse-item>
        </uni-collapse>

        <uni-collapse class="my-3" v-if="recordList && recordList.length">
            <uni-collapse-item title-border="none" :border="false" :open="true" v-if="draw">
                <template v-slot:title>
                    <div class="page-title collapse-title">
                        <div class="scan-title">
                            <span>扫码校验</span>
                        </div>
                    </div>
                </template>
                <div class="collapse-content">
                    <div class="number-box">
                        <div class="number-item">
                            <div class="text-warning item-value">{{ getTiresNum(recordList) }}</div>
                            <div class="item-text">已扫胎数</div>
                        </div>

                        <div class="number-item">
                            <div class="text-success item-value">{{ recordList?.length || 0 }}</div>
                            <div class="item-text">正确数量</div>
                        </div>

                        <div class="number-item">
                            <div class="text-danger item-value">0</div>
                            <div class="item-text">错误数量</div>
                        </div>
                    </div>

                    <div class="scan-list">
                        <div class="page-card" v-for="(scan, index) in recordList" :key="index">
                            <div class="scan-content">
                                <uni-icons
                                    :type="scan.type === 'error' ? 'clear' : 'checkbox-filled'"
                                    :color="scan.type === 'error' ? '#D81E06' : '#52C41B'"
                                    size="28"
                                />
                                <div
                                    class="center-content"
                                    :class="scan.type === 'error' ? 'text-danger' : ''"
                                >
                                    {{ formatScan(scan.code) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uni-collapse-item>
        </uni-collapse>

        <!-- 关联SAP -->
        <div class="page-card my-3">
            <div class="page-title">SAP关联信息</div>
            <div class="link-box">
                <div class="link-title">入库单号</div>
                <span>{{ detailInfo.sapOrderNum || '暂未绑定' }}</span>
            </div>
        </div>

        <!-- QM抽检 -->
        <div class="page-card my-3" v-show="detailInfo.qmCheckRes !== '2'">
            <div class="page-title">QM抽检</div>
            <div class="link-box">
                <div class="link-title">抽检结果</div>
                <span v-if="detailInfo.qmCheckRes === '1'" class="text-success">通过</span>
                <span v-else class="text-danger">未通过</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { formatScan, getTiresNum } from '@/utils/publicFuc'
    import { detail } from '@/api/pda'

    const tagMap = [
        {
            status: '1',
            class: 'danger-tag',
            text: '待入库',
        },
        {
            status: '2',
            class: 'success-tag',
            text: '已入库',
        },
        {
            status: '3',
            class: 'warning-tag',
            text: 'SAP入库',
        },
        {
            status: '4',
            class: 'error-tag',
            text: '已删除',
        },
    ]

    const detailInfo = ref<AnyObject>({})

    const tag = computed(() => {
        if (detailInfo.value?.receiptStatus) {
            return tagMap.find(item => item.status === detailInfo.value.receiptStatus) as any
        } else {
            return {
                class: '',
                text: '',
            }
        }
    })

    const pageCode = ref('')
    const pageId = ref('')
    onLoad((option: any) => {
        const { id } = option
        if (id) pageCode.value = id
        loadData(pageCode.value)
    })

    // 解决收缩框加载过快的问题
    const draw = ref(false)

    const recordList = ref<AnyObject[]>([])
    const feedList = ref<AnyObject[]>([])
    const loadData = (id: string) => {
        detail(id).then((res: any) => {
            detailInfo.value = res.data
            // 下面要处理scanlist
            const { scanRecordList, id } = res.data
            pageId.value = id

            //校验
            scanRecordList
                .filter((item: { scanType: string }) => item.scanType === '0')
                .forEach((record: AnyObject) => {
                    recordList.value.push({ code: record.barCode, type: 'success' })
                })

            // 投喂
            scanRecordList
                .filter((item: { scanType: string }) => item.scanType === '1')
                .forEach((record: AnyObject) => {
                    feedList.value.push({ code: record.barCode, type: 'success' })
                })

            draw.value = true
        })
    }
</script>

<style lang="scss" scoped>
    .scan-page {
        @apply min-h-screen bg-pagebg p-4 pb-20 box-border;
        .title-content {
            @apply flex  items-center flex-1 justify-between;
        }
        .info-list {
            .list-item {
                @apply flex py-4 justify-between;
                &:not(:last-of-type) {
                    @apply border-b border-line border-solid border-0;
                }

                .item-content {
                    @apply flex-1 text-right text-grayText ml-4 break-all;
                }
            }
        }

        :deep(.uni-collapse) {
            @apply bg-transparent;
            .uni-collapse-item {
                @apply my-3 bg-white rounded-lg overflow-hidden  #{!important};
            }

            .collapse-title {
                @apply p-4 pb-0;
            }
            .collapse-content {
                @apply bg-pagebg;
            }
        }
        .number-box {
            @apply flex justify-evenly pb-4 bg-white rounded-b-lg;
            .number-item {
                @apply flex flex-col items-center;
                .item-value {
                    @apply font-bold text-xl mb-2;
                }
            }
        }
        .scan-list {
            .page-card {
                @apply my-3;
                .scan-content {
                    @apply flex justify-between items-center;
                }
                .center-content {
                    @apply flex-1 mx-4 break-all;
                }
            }
        }

        .link-box {
            @apply flex justify-between items-center;
        }
    }

    .tag {
        @apply font-normal text-sm;
    }
    .danger-tag {
        @apply px-4 py-1 text-danger border border-solid border-danger rounded-full bg-red-100;
    }
    .success-tag {
        @apply px-4 py-1 text-success border border-solid border-success rounded-full bg-green-100;
    }
    .warning-tag {
        background-color: #ffeed7;
        @apply px-4 py-1 text-warning border border-solid border-warning
                    rounded-full;
    }

    .error-tag {
        @apply px-4 py-1 text-white rounded-full bg-danger;
    }
</style>
